<template>
  <div class="flex">
    <el-input
      v-model="name"
      style="width: 250px; height: 35px"
      :placeholder="props.placeholder"
      prefix-icon="Search"
      clearable
      class="ml-[35px]"
      @keydown.enter="handleEnter"
      @blur="handleEnter"
    />
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
let props = defineProps({
  placeholder: {
    type: String,
    default: "搜索文件",
  },
});
const name = ref("");

const emit = defineEmits(["search"]);

const handleEnter = () => {
  // 在这里执行查询逻辑
  emit("search", name.value);
};
</script>

<style scoped>
:deep(.el-input .el-input__wrapper) {
  background-color: var(--white);
  border: 1px solid #706969 !important;
}

.el-input__inner {
  border: 0 !important;
}

.el-input {
  --el-input-focus-border-color: #35353d;
  --el-input-border-color: #35353d;
}
</style>
